﻿@*@model CottagesOfHope.ViewModels.GetConnected*@
@{
    ViewBag.Title = "Get Connected";
}

<div class="titleBar">
    <h2>Get Connected</h2>
</div>
<br />
<br />

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary()

    <div id="myCarousel" class="carousel slide">

        <!-- Carousel items -->
        <div class="carousel-inner">

            <!-- Registration Part 1-->
            <div class="active item">

                <div class="well transparent regForm">
                    <form class="form-horizontal">
                        <!-- Breadcrumb and Progress Bar-->
                        <div class="customCrumb">
                            <p><span style="color: #000;">Household Information</span> &nbsp <i class="icon-chevron-right"></i>&nbsp Select Your Programs  &nbsp <i class="icon-chevron-right"></i>&nbsp Optional Information Section &nbsp <i class="icon-chevron-right"></i>&nbsp Disclaimer & Finish</p>
                        </div>
                        <div class="progress" style="height: 10px;">
                            <div class="bar" style="width: 23%;"></div>
                        </div>
                        <br />
                        <div class="control-group" style="margin-left: 20px;">
                            <label class="control-label">May we text you?</label>
                            <div class="controls">
                                <select class="input-small" name="GetConnected.TextMessage">
                                    <option>Yes</option>
                                    <option>No</option>
                                </select>
                            </div>
                        </div>
                        <br />
                        <div class="control-group" style="margin-left: 20px;">
                            <label class="control-label" for="inputMI">
                                Children in household<br />
                                (0-18 years old)</label>
                            <div class="controls">
                                <input type="text" class="span1" id="inputMI" name="GetConnected.Children" placeholder="2">
                            </div>
                        </div>
                        <br />
                        <div class="control-group" style="margin-left: 20px;">
                            <label class="control-label" for="inputLastName">Age range of adults</label>
                            <div class="controls">
                                <select class="input-small" name="GetConnected.AdultsAge">
                                    <option>19 - 25</option>
                                    <option>36 - 45</option>
                                    <option>55+</option>
                                </select>
                            </div>
                        </div>
                    </form>
                </div>
                <a href="#myCarousel" data-slide="next" class="btn btn-large" id="GenerateUserName">Next</a>
            </div>

            <!-- Registration Part 2-->
            <div class="item">

                <div class="well transparent regForm">
                    <form>
                        <!-- Breadcrumb and Progress Bar-->
                        <div class="customCrumb">
                            <p>Household Information &nbsp <i class="icon-chevron-right"></i>&nbsp <span style="color: #000;">Select Your Programs</span>  &nbsp <i class="icon-chevron-right"></i>&nbsp Optional Information Section  &nbsp <i class="icon-chevron-right"></i>&nbsp Disclaimer & Finish</p>
                        </div>
                        <div class="progress" style="height: 10px;">
                            <div class="bar" style="width: 44%;"></div>
                        </div>
                        <legend>Please check all programs or topics you would like to hear more about:</legend>

                        <div class="row" style="margin-left: 20px;">
                            <div class="span5">
                                <label class="checkbox">
                                    <input type="checkbox" id="checkbox1" value="option1" />Free Tax Preparation & Refund Analysis
                                </label>
                                <label class="checkbox">
                                    <input type="checkbox" id="checkbox2" value="option2" />Financial classes (Budget, Credit, Debt)
                                </label>
                                <label class="checkbox">
                                    <input type="checkbox" id="checkbox3" value="option3" />Debt counseling / management
                                </label>
                                <label class="checkbox">
                                    <input type="checkbox" id="checkbox4" value="option4" />Home buyer class
                                </label>
                                <label class="checkbox">
                                    <input type="checkbox" id="checkbox5" value="option5" />Individual Development Account (Matched savings)
                                </label>
                                <label class="checkbox">
                                    <input type="checkbox" id="checkbox6" value="option6" />Open a savings / checking account
                                </label>
                            </div>
                            <div class="span5" style="margin-left: 20px;">
                                <label class="checkbox">
                                    <input type="checkbox" id="checkbox7" value="option7" />Becoming a Utah Saver
                                </label>
                                <label class="checkbox">
                                    <input type="checkbox" id="checkbox8" value="option8" />Resumes, Job Search & Career Planning
                                </label>
                                <label class="checkbox">
                                    <input type="checkbox" id="checkbox9" value="option9" />Education Assistance, Planning & Scholarships
                                </label>
                                <label class="checkbox">
                                    <input type="checkbox" id="checkbox10" value="option10" />Computer classes
                                </label>
                                <label class="checkbox">
                                    <input type="checkbox" id="checkbox11" value="option11" />Cottage newsletter
                                </label>
                                <label class="checkbox">
                                    <input type="checkbox" id="checkbox12" value="option12" />Food, clothing & shelter support
                                </label>
                            </div>
                        </div>
                    </form>
                </div>
                <a href="#myCarousel" data-slide="prev" class="btn btn-large btn-inverse">Back</a>&nbsp;&nbsp;
                            <a href="#myCarousel" data-slide="next" class="btn btn-large">Next</a>
            </div>

            <!-- Registration Part 3-->
            <div class="item">
                <div class="well transparent regForm">
                    <form>
                        <!-- Breadcrumb and Progress Bar-->
                        <div class="customCrumb">
                            <p>Household Information &nbsp <i class="icon-chevron-right"></i>&nbsp Select Your Programs  &nbsp <i class="icon-chevron-right"></i>&nbsp <span style="color: #000;">Optional Information Section</span>  &nbsp <i class="icon-chevron-right"></i>&nbsp Disclaimer & Finish</p>
                        </div>
                        <div class="progress" style="height: 10px;">
                            <div class="bar" style="width: 73%;"></div>
                        </div>
                        <br />
                        <div class="row" style="margin-left: 20px;">
                            <div class="span5">
                                <label># of Individuals in your home that have a tobacco habit: </label>
                                <input type="text" class="input-mini" />
                            </div>
                            <div class="span5" style="margin-left: 20px;">
                                <label>Estimated amount spent on tobacco per month: </label>

                                <div class="input-prepend input-append">
                                    <span class="add-on" style="color: black">$</span>
                                    <input type="text" class="input-mini" />
                                    <span class="add-on" style="color: black">.00</span>
                                </div>
                            </div>
                        </div>
                        <br />
                        <div class="row" style="margin-left: 20px;">
                            <div class="span7">
                                <label>Would you or any other tobacco users in your home be interested in quitting?</label>
                                <select class="input-small">
                                    <option>Yes</option>
                                    <option>No</option>
                                </select>
                            </div>
                        </div>
                    </form>
                </div>
                <a href="#myCarousel" data-slide="prev" class="btn btn-large btn-inverse">Back</a>&nbsp;&nbsp;
                            <a href="#myCarousel" data-slide="next" class="btn btn-large">Next</a>
            </div>
            <!-- Registration Part 4-->
            <div class="item">
                <div class="well transparent regForm">
                    <form class="form-horizontal">
                        <!-- Breadcrumb and Progress Bar-->
                        <div class="customCrumb">
                            <p>Household Information &nbsp <i class="icon-chevron-right"></i>&nbsp Select Your Programs  &nbsp <i class="icon-chevron-right"></i>&nbsp Optional Information Section  &nbsp <i class="icon-chevron-right"></i>&nbsp <span style="color: #000;">Disclaimer & Finish</span></p>
                        </div>
                        <div class="progress" style="height: 10px;">
                            <div class="bar" style="width: 100%;"></div>
                        </div>
                        <br />
                        <!-- /Breadcrumb + spacing -->
                        <div class="span7 offset1">
                            <p style="border: solid #dfdfdf 1px; height: 115px; width: 650px; padding: 20px; border-radius: 10px; background-color: #fcfcfc">
                                I authorize Cottages of Hope, & community partners, to contact me concerning the programs that I have
                selected that are offered either by Cottages of Hope, or by one of their community partners.  I realize
                that my personal information will not be given or sold to outside parties & will not be used for any other
                purpose.  It has been explained to me that I can have my personal information removed from Cottages of Hope's
                records upon request.
                            </p>
                            <label class="checkbox" style="margin-left: 10px;">
                                <input type="checkbox" id="agreetoterms" />I agree to these terms
                            </label>
                        </div>

                    </form>
                </div>
                <a href="#myCarousel" data-slide="prev" class="btn btn-large btn-inverse">Back</a>&nbsp;&nbsp;
                            <a href="#" class="btn btn-large">Submit</a>
            </div>
        </div>
    </div>

}

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>

}